<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:py="http://genshi.edgewall.org/"
      xmlns:xi="http://www.w3.org/2001/XInclude"
      xmlns:i18n="http://genshi.edgewall.org/i18n"

      py:with="page_size = 30"
      py:strip="True"
      >

    <xi:include href="layout.html" />

    <head>
        <title>Latest announcements</title>

        <!-- ! Change height of just this page to one bit higher to always get v-scroll -->
        <style type="text/css">
            html {
                height:101%;
            }
        </style>
    </head>

    <body>
        <py:def function="list_events(eventlist)">
            <div class="resource-box">
                <ul py:if="eventlist">
                    <li class="timeline_event newtopic rss_separator" py:for="newsitem in eventlist">
                        <div>
                            <a href="${req.href('..', newsitem.project.env_name)}" title="${newsitem.project.project_name}">
                                <img class="ga_icon" src="${newsitem.project.icon_url}" />
                            </a>
                        </div>
                        <div>
                            <a href="${req.href('..', newsitem.project.env_name, 'discussion/topic', newsitem.topic_id)}" title="${newsitem.subject}">
                                <strong>${newsitem['subject']}</strong>
                            </a>
                            <div>
                                ${fromtimestamp(newsitem['time']).strftime("%d %B %Y")} by
                                <span class="author">
                                    <a class="profilebox-link_" href="#">${format_author(newsitem['author'])}</a>
                                </span>
                                in
                                <a href="${req.href('..', newsitem.project.env_name)}" title="${newsitem.project.project_name}">
                                    ${newsitem.project.project_name}
                                </a>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </py:def>

        <py:def function="paginate(events, position)">
            <div class="events_pagination" style="float:${position};" py:with="pcount = int(math.ceil(float(len(events)) / page_size))">
                <py:for each="page in range(1,pcount+1)">
                    <span class="sub_${page} subpage_link${(page == 1 and ' selected') or ''}">${page}</span>
                    <py:if test="page != pcount">|</py:if>
                    <py:if test="page == pcount">&nbsp;</py:if>
                </py:for>
            </div>
            <div class="clearer"></div>
        </py:def>

        <div id="content">
            <h1 style="padding:0;" id="pageHeader">Latest announcements</h1>

            ${paginate(events, 'right')}
            <div id="global_events_list">
                <div id="page_${page}" class="event_page${(page == 1 and ' active') or ''}" py:for="page in [1,2,3,4,5]" py:if="len(events[(page-1)*page_size:]) > 0">
                    <py:with vars="start=(page-1)*page_size; end=(page-1)*page_size+page_size">
                        ${list_events(events[start:end])}
                    </py:with>
                </div>
            </div>
            ${paginate(events, 'left')}

        </div>

        <script type="text/javascript">
            $(document).ready(function() {
                $('.subpage_link').click(function (){
                    /* No effect for selected page */
                    if($(this).hasClass('selected')) {
                        return;
                    }

                    var page_number = $.trim($(this).html());

                    /* Clear previous selection */
                    $('.subpage_link').removeClass('selected');

                    /* Add this as selected */
                    $('.sub_' + page_number).addClass('selected');

                    /* Toggle page (hide previous, show current)*/
                    $('.event_page').removeClass('active');
                    var page = '#page_' + page_number;
                    $(page).addClass('active').ready(function() {
                        $("html, body").animate({ scrollTop: 0 }, 200);
                    });
                });
            });
        </script>
    </body>

</html>
